<template>
  <div>
    <div class="ba_f pad_b_10 pad_t_10">
      <el-tabs v-model="activeName">
        <el-tab-pane label="分销设置" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>基础设置</span>
          </div>
        </div>
        <el-form ref="form" :model="formData" label-width="180px">
          <el-form-item label="分销商功能" prop="open">
            <el-radio-group v-model="formData.open" @change="changer1">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="formData.open == 1">
            <el-form-item label="佣金类型" prop="moneyType">
              <el-radio-group v-model="formData.moneyType">
                <el-radio :label="1">百分比</el-radio>
                <el-radio :label="2">固定金额</el-radio>
              </el-radio-group>
              <div class="lh16 fon_12 color_9">默认佣金比例</div>
            </el-form-item>
            <el-form-item label="分销层级" prop="type">
              <el-radio-group v-model="formData.type">
                <el-radio :label="1">一级分销</el-radio>
                <el-radio :label="2">二级分销</el-radio>
              </el-radio-group>
              <div class="lh16 fon_12 color_9">默认佣金比例</div>
            </el-form-item>
            <el-form-item label="申请审核" prop="examineOpen">
              <el-radio-group v-model="formData.examineOpen">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="2">关闭</el-radio>
              </el-radio-group>
              <div class="lh16 fon_12 color_9">开启后，分销商申请需要后台审核</div>
            </el-form-item>
            <template class="">
              <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                  <span>一级分佣比例</span>
                </div>
              </div>
              <el-form-item label="外卖">
                <el-input placeholder="请输入内容" v-model="formData.takeOutOne" style="width: 200px;">
                  <template slot="append">{{ formData.moneyType == 1 ? '%' : '元' }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="店内">
                <el-input placeholder="请输入内容" v-model="formData.inStoreOne" style="width: 200px;">
                  <template slot="append">{{ formData.moneyType == 1 ? '%' : '元' }}</template>
                </el-input>
              </el-form-item>
            </template>
            <template v-if="formData.type == 2">
              <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                  <span>二级分佣比例</span>
                </div>
              </div>
              <el-form-item label="外卖" prop="isOpen">
                <el-input placeholder="请输入内容" v-model="formData.takeOutTwo" style="width: 200px;">
                  <template slot="append">{{ formData.moneyType == 1 ? '%' : '元' }}</template>
                </el-input>
              </el-form-item>
              <el-form-item label="店内" prop="isOpen">
                <el-input placeholder="请输入内容" v-model="formData.inStoreTwo" style="width: 200px;">
                  <template slot="append">{{ formData.moneyType == 1 ? '%' : '元' }}</template>
                </el-input>
              </el-form-item>
            </template>
          </template>
          <template v-if="formData.open == 1">
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>分销商申请协议</span>
              </div>
            </div>
            <el-form-item label="申请协议标题">
              <el-input placeholder="请输入申请协议标题" v-model="formData.agreementTitle"></el-input>
            </el-form-item>
            <el-form-item label="申请广告图">
              <div class="uploadSource bor_de rel flex curs" v-if="formData.adImg">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(formData.adImg,1)"></i>
                </label>
                <img :src="formData.adImg" @click="test(1)" class="wid"/>
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin lh16">建议尺寸：720*250</div>
            </el-form-item>
            <el-form-item label="申请协议内容">
              <baidu-ueditor style="width: 800px;" :content="formData.agreement" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>分享设置</span>
              </div>
            </div>
            <el-form-item label="分享标题">
              <el-input v-model="formData.shareTitle" placeholder="请输入分享标题"></el-input>
            </el-form-item>
            <el-form-item label="分享图片">
              <div class="uploadSource bor_de rel flex curs" v-if="formData.shareIcon">
                <label class="statusLabel curs" @mouseenter="enter(2)" @mouseleave="leave(2)">
                  <i class="el-icon-check" ref="imgicon2"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(formData.shareIcon,2)"></i>
                </label>
                <img :src="formData.shareIcon" @click="test(2)" class="wid"/>
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(2)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
            </el-form-item>
            <el-form-item label="海报分享图片">
              <div class="uploadSource bor_de rel flex curs" v-if="formData.shareAd">
                <label class="statusLabel curs" @mouseenter="enter(3)" @mouseleave="leave(3)">
                  <i class="el-icon-check" ref="imgicon3"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(formData.shareAd,3)"></i>
                </label>
                <img :src="formData.shareAd" @click="test(3)" class="wid"/>
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(3)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </template>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
    <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
    <attachment-img ref="img2" type="img" @attachment="imgadd2"></attachment-img>
    <attachment-img ref="img3" type="img" @attachment="imgadd3"></attachment-img>
  </div>
</template>
<script>
import baiduUeditor from '@/plugins/baidu-ueditor';
import attachmentImg from '@/plugins/attachment-img';
import {getConfig, postConfig} from "@/api/setup";

export default {
  components: {attachmentImg, baiduUeditor},
  created() {
    this.bus.$emit('loading', false);
    this.init()
  },
  data() {
    return {
      activeName: '1',
      formData: {
        open: 1,
        takeOutOne: '',
        takeOutTwo: '',
        inStoreOne: '',
        inStoreTwo: '',
        type: 1,
        examineOpen: 1,
        agreementTitle: '',
        agreement: '',
        moneyType: 1,
        adImg: '',
        shareTitle: '',
        shareIcon: '',
        shareAd: '',
      },
      rules: {}
    };
  },
  methods: {
    async init() {
      const {data} = await getConfig({ident:'distributionSet'});
      this.form2 = this.formData;
      this.formData = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.formData.adImg = url.str;
    },
    imgadd2(url) {
      this.formData.shareIcon = url.str;
    },
    imgadd3(url) {
      this.formData.shareAd = url.str;
    },
    deleteMultiImage(item, index, type) {
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 5:
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.formData.adImg = '';
            break;
          case 2:
            this.formData.shareIcon = '';
            break;
          case 3:
            this.formData.shareAd = '';
            break;
        }
      }
    },
    getUeditor(msg) {
      this.formData.agreement = msg;
    },
    changer1(msg) {
      this.formData.open = msg;
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.formData.ident = 'distributionSet';
          this.formData.identName = '分销商设置';
          const {msg} = await postConfig(this.formData);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
